웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
특정 요소를 보이게 하거나 숨기게 하는 기능으로 show(), hide() 메소드를 사용할 수 있습니다.
hide() 메소드는 display를 none으로 바꾸는 것과 기능적으로 동일하지만 기존의 display 속성이 무엇이었는지... 예를들어 diplay:block; display: inline; display: inline-block; 등의 정보를 기억해 show() 메소드 실행시 이전의 속성을 불러오는 특징이 있습니다. 그렇기 때문에 display 속성을 기억하여 다시 지정하지 않아도 된다는 장점이 있습니다.
또 다른 특징으로는 animation효과가 가능하다는 점입니다. 인자로 시간을 넣어줄 경우 지정된 시간만큼 애니메이션 효과가 나타납니다.
<script>
$('div').hide(1000);
// 1초동안 서서히 애니메이션으로 숨기기
$('div').show(1000);
// 1초동안 서서히 애니메이션으로 보이기
</script>
# display, visibility 속성을 사용하는 것과의 차이점은?
hide() 메소드는 display를 none으로 바꾸는 것과 기능적으로 동일하지만 기존의 display 속성이 무엇이었는지... 예를들어 diplay:block; display: inline; display: inline-block; 등의 정보를 기억해 show() 메소드 실행시 이전의 속성을 불러오는 특징이 있습니다. 그렇기 때문에 display 속성을 기억하여 다시 지정하지 않아도 된다는 장점이 있습니다.
또 다른 특징으로는 animation효과가 가능하다는 점입니다. 인자로 시간을 넣어줄 경우 지정된 시간만큼 애니메이션 효과가 나타납니다.
<script>
$('div').hide(1000);
// 1초동안 서서히 애니메이션으로 숨기기
$('div').show(1000);
// 1초동안 서서히 애니메이션으로 보이기
</script>
아래의 글도 찾고 계시지 않나요?
